<template>
  <!-- PolicyServiceReport 政策服务报告 -->
  <PageContainer>
    <view class="container">
      <FullLoading :full-loading="isFullLoading" />
      <Tabs v-model="currentTab" v-if="result">
        <Header
          title="政策服务报告"
          :is-box-shadow="false"
          :default-slot-content-height="78"
          :z-index="99"
        >
          <view class="company-name">
            <text>{{ name }}</text>
          </view>
          <NumItems :result="result" />
          <Contact v-if="result.isServiceProvider" :result="result" />
          <TabNav tabBarColor="#D7B87C" />
        </Header>

        <TabsItem name="5星" :value="0">
          <view style="padding-bottom: 50rpx">
            <template v-for="item in result?.list5" :key="item.id">
              <PolicyItem :item="item" />
            </template>
          </view>
        </TabsItem>
        <TabsItem name="4星" :value="1">
          <view style="padding-bottom: 50rpx">
            <template v-for="item in result?.list4" :key="item.id">
              <PolicyItem :item="item" />
            </template>
          </view>
        </TabsItem>
        <TabsItem name="3星" :value="2">
          <view style="padding-bottom: 50rpx">
            <template v-for="item in result?.list3" :key="item.id">
              <PolicyItem :item="item" />
            </template>
          </view>
        </TabsItem>
      </Tabs>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  PolicyServiceReport  政策服务报告 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import NumItems from './components/numItems.vue';
  import Contact from './components/contact.vue';
  import PolicyItem from './components/policyItem.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import FullLoading from '@/components/FullLoading/index.vue';
  import { ref } from 'vue';
  import { reportInfo } from '@/api/membership/index';
  import { type ReportInfoResult } from '@/api/membership/types';
  import { navigateBack, onLoad } from '@/router';
  import { CacheEnum } from '@/enums/cacheEnum';

  const currentTab = ref(0);
  const name = ref();
  const result = ref<ReportInfoResult>();
  const isFullLoading = ref(true);
  const appId = uni.getStorageSync(CacheEnum.appid);

  async function getReportInfo() {
    try {
      let res = await reportInfo(name.value);
      result.value = res;
      isFullLoading.value = false;
    } catch (error) {
      isFullLoading.value = false;
      setTimeout(() => {
        navigateBack();
      }, 2000);
    }
  }

  onLoad<'PolicyServiceReport'>((op) => {
    name.value = op.name;
    getReportInfo();
  });
</script>

<style lang="scss" scoped>
  .company-name {
    text-align: center;
    color: #808080;
    font-size: 28rpx;
    padding-top: 20rpx;
  }
</style>
